<!-- 推荐管理 -->
<template>
  <div class="app-container">
    <div class="addButton">
      <!-- <el-button size="mini" type="primary" @click="getDetailList(1)">查询</el-button> -->
      <el-button type="primary" @click="dialog.visible = true">新增推荐</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData.list"
      style="width: 100%; margin: 50px 0 0"
    >
      <el-table-column
        width="80"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.active" type="text">关闭</el-button>
          <el-button v-if="!scope.row.active" type="text">激活</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="title"
        label="商品标题"
        width="350"
      >
        <template slot-scope="scope">
          <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ scope.row.title }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="classify"
        label="分类"
        width="120"
      />
      <el-table-column
        prop="type"
        label="推荐类别"
        width="120"
      />
      <el-table-column
        prop="createAt"
        label="创建于"
        width="120"
      />
    </el-table>

    <el-dialog
      title="新增推荐设置"
      :visible="dialog.visible"
      :show-close="false"
    >

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  data() {
    return {
      loading: false,
      tableData: {
        list: [],
        total: 0,
        pagination: 1
      },
      dialog: {
        visible: false,
        form: {
          classify: '',
          active: false
        }
      },
      map: []
    }
  },
  mounted() {
    this.getRecommendSet()
  },
  methods: {
    getRecommendSet() {
      this.loading = true
      this.request({
        url: '/parameter/recommend-set-list',
        method: 'GET',
        params: { total: 20, pagination: this.tableData.pagination }
      }).then(res => {
        if (res.code === 200) {
          this.tableData.list = res.data.list
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getMapList() {
      this.request({
        url: '/parameter/get-classify-map',
        method: 'GET'
      }).then(res => {
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.addButton {
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1000;
}
</style>
